<script setup lang="ts">

const mapView = ref(null)

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
const MapBox = maplibregl

onMounted(() => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const map = new MapBox.Map({
    // fadeDuration: 0,
    container: mapView.value, //容器的id
    // style: `http://test3d.hxgis.com/Assets/2023/mvt/maptiler/style.json`,
    style: 'https://demotiles.maplibre.org/style.json',
    // style: `${AssetsHost}/Assets/2024/Beijing/vt/gt-basemap-streets-v1.json`,
    // style: 'https://api.maptiler.com/maps/basic/style.json?key=pSHUA9sSkNny3iqoWG4P',
    // style:'http://10.40.17.54:28068/cmadaas/music/emap/schema?templateId=default&serviceNodeId=BABJ_CMADAAS_MUSIC_GIS_EMAP&dataCode=OTHE_EMAP_GLB_WORLD_TILE_VEC&apiKey=NMIC_ZLS_54hq7fklNQ4UmLVo9AFwkvd8jHRZicKH&map=gt-basemap-streets-v1',
    center: [110, 30], // 初始位置，经度纬度 [lng, lat]
    zoom: 3, // 初始缩放
    antialias: true, //抗锯齿
  })
})
</script>

<template>
  <div ref="mapView" class="cesium-container"></div>
</template>

<style lang="less">
.cesium-container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
